<template>
  <div class="line-setting">
      <el-form ref="lineSetting" :model="setting" label-position="top"  style="height:auto;">
        <el-form-item label="Dimension">
          <!-- <el-select v-model="setting.userId" placeholder="Please select Dimension" style="width:80%;" filterable  clearable>
            <el-option v-for="(item,index) in userInfoList" :key="index"  :label="item.realName" :value="item.id"></el-option>
          </el-select> -->
          <el-select v-model="setting.userId" filterable clearable size="mini" placeholder="Please select" popper-class="user_select">
            <el-option
              v-for="(item,index) in  userInfoList"
              :key="index"
              :label="item.realName"
              :value="item.id">
              <div class="user_option">
                <el-avatar :size="40" class="header_img"
                          :src="item.headUrl">
                </el-avatar>
                <div class="header_name">{{item.realName}}</div>
                <div class="header_select"></div>
              </div>
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="24-Hour Time">
          <el-switch v-model="setting.hourTime"></el-switch>
        </el-form-item>
        <el-form-item label="Show avatar">
          <el-switch v-model="setting.isShowAvatar"></el-switch>
        </el-form-item>
      </el-form>
  </div>
</template>

<script>

export default {
  name: 'UserInfoCardSetting',
  components: { },
  data () {
    return {
      dataSource: [],
      dataSourceColumns: [],
      setting: {
        titleFontSize: '16px',
        titleFontColor: '#000',
        title: '',
        footerTitle: '',
        footerTitleFontSize: '25px',
        footerTitleFontColor: '#666',
        valueFontSize: '100px',
        valueFontColor: '#495057',
        drillThroughStatus: true,
        userId: null,
        valueFieldsName: 'value',
        headerTitle: '',
        headerDescription: '',
        hourTime: false,
        isShowAvatar: true
      },
      userInfoList: []
    }
  },
  props: [
    'data', 'fieldsList'
  ],
  watch: {
    data (value, oldValue) {
      return this.updateSetting(value)
    },
    fieldsList (val) {
      let temp = []
      this.dataSourceColumns = []
      val.forEach(item => {
        temp.push(item.name)
      })
      this.dataSourceColumns = temp
    }
  },
  computed: { },
  created () {
    if (this.data) {
      this.$set(this.data)
    }
    this.queryUserInfo()
  },
  methods: {
    getData () {
      return this.setting
    },
    queryUserInfo () {
      const params = {
        status: 1

      }
      this.$interface.schedule.getWorkScheduledUserListApi(params).then(({ data: res }) => {
        if (res.data) {
          this.userInfoList = res.data
          this.userInfoList = this.userInfoList.sort(function (a, b) {
            return a.username.localeCompare(b.username)
          })
        }
      })
    },
    updateSetting (value, list, layerStatus) {
      // let temp = []
      /// this.dataSourceColumns = []
      this._.merge(this.setting, value.gadgetSetting)

      // list.forEach(item => {
      //  temp.push(item.name)
      // })
      // this.dataSourceColumns = temp
      this.$emit('update:data', this.setting)
    }

  }
}
</script>

<style lang="scss">
.user_select{
  .el-select-dropdown__item{
    padding: 0 10px;
  }
  .selected{
    .header_select{
      background-image: url('#{$--ossLink}/app/view_pageheader/user_selected.png');
      background-repeat: no-repeat;
      background-size: 14px;
      background-position: center;
    }
  }
  .user_option{
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .header_img{
      width: 28px !important;
      height: 28px !important;
      line-height: 28px !important;
      text-align: center;
      margin-right: 10px;
      // background-color: $--themt-fontSize;
      color: #fff;
      font-size: 12px;
      border-radius: 50%;
    }
    .header_name{
      flex: 1;
    }
    .header_select{
      width: 14px;
      height: 14px;
    }
  }
}

</style>
